<template>
  <button
    class="block py-3 px-5 w-full bg-c-grey-xs hover:bg-c-grey-small rounded-xl max-h-12"
  >
    <div class="flex items-center justify-center gap-2.5">
      <slot name="prefix-icon" />
      <span class="heading-m-medium" :class="computedLabelClass">{{
        label ?? ''
      }}</span>
      <slot name="suffix-icon" />
    </div>
  </button>
</template>

<script setup lang="ts">
interface Props {
  label: string
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  label: 'Label',
  disabled: false
})

const computedLabelClass = computed(() => ({
  'text-c-grey-xl': !disabled.value,
  'text-c-grey-large': disabled.value
}))

const { label, disabled } = toRefs(props)
</script>
